<!-- 总站综合信息 -->
<template>
	<div class="chart-scrollbar layout-station">
		<pageHeader :headerTitle="headerTitle" :showWeather="false" />

		<div style="height: 0.2rem"></div>
		<div style="display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1rem; font-weight: bold; height: 4.8rem">
			<div v-for="item in pageOneNumber" :key="item.id">
				<p style="text-indent: 1em; min-height: 2rem">{{ getLabel(item.id) }}</p>
				<p class="bg-image" :style="{ backgroundImage: 'url(' + item.image + ')' }">
					<span :style="{ color: item.color }">
						<span v-if="item.id != 0">{{ item.name }}</span>
						&nbsp;&nbsp;&nbsp;
						<span v-if="item.id != 0">{{ item.value }}</span>
						<span v-if="item.id == 6">MWp</span>
						<p v-if="item.id == 0" style="margin-top: -2.8rem; line-height: 2rem; border: 1px solid #48a0f8; padding: 0.5rem; border-radius: 0.3rem">
							<span>{{ item.name }}</span>
							<el-select v-model="titleName" placeholder="请选择子站">
								<el-option v-for="item in substationData" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</p>
					</span>
				</p>
			</div>
		</div>

		<div style="height: 1rem"></div>

		<div style="height: calc(100vh - 17rem); display: flex; flex-direction: column">
			<div style="flex: 1; display: grid; grid-template-columns: 3fr 7fr; grid-gap: 1rem">
				<div class="chart-one-container">
					<div ref="realTimePower" style="height: 70%"></div>
					<p style="text-align: center; margin-top: -3rem">
						<span style="font-size: 13px">{{ $t('message.oneStandNews.pagePower') }}:</span>&nbsp;<span
							style="color: rgb(0, 162, 255); font-size: 1rem"
							>0.799 MW</span
						>
					</p>
					<div style="font-weight: bold; display: flex; font-size: 0.8rem; justify-content: space-around; margin-top: 1.8rem">
						<div style="text-align: center">
							<p>3.65</p>
							<br />
							<p style="color: rgb(0, 162, 255)">{{ $t('message.oneStandNews.pageOperating') }}</p>
							<p style="color: rgb(0, 162, 255)">(h)</p>
						</div>
						<div style="text-align: center">
							<p>0.4777</p>
							<br />
							<p style="color: rgb(0, 162, 255)">{{ $t('message.oneStandNews.pageDaily') }}</p>
							<p style="color: rgb(0, 162, 255)">(万kWh)</p>
						</div>
						<div style="text-align: center">
							<p>16.5912</p>
							<br />
							<p style="color: rgb(0, 162, 255)">{{ $t('message.oneStandNews.pageMonth') }}</p>
							<p style="color: rgb(0, 162, 255)">(万kWh)</p>
						</div>
						<div style="text-align: center">
							<p>54.8112</p>
							<br />
							<p style="color: rgb(0, 162, 255)">{{ $t('message.oneStandNews.pageYear') }}</p>
							<p style="color: rgb(0, 162, 255)">(万kWh)</p>
						</div>
						<div style="text-align: center">
							<p>480.6821</p>
							<br />
							<p style="color: rgb(0, 162, 255)">{{ $t('message.oneStandNews.pageGeneration') }}</p>
							<p style="color: rgb(0, 162, 255)">(万kWh)</p>
						</div>
					</div>
				</div>
				<div class="chart-two-container">
					<el-table :data="tableData" class="table-container" :header-cell-style="headerCellStyle" :row-class-name="tableRowClassName">
						<el-table-column prop="date" :label="$t('message.oneStandNews.pageSubstation')" />
						<el-table-column prop="name" :label="$t('message.oneStandNews.pageStatus')" />
						<el-table-column prop="address" :label="$t('message.oneStandNews.pagePowerTable')" />
						<el-table-column prop="date" :label="$t('message.oneStandNews.pageWatt')" />
						<el-table-column prop="name" :label="$t('message.oneStandNews.pageOperating')" />
						<el-table-column prop="address" :label="$t('message.oneStandNews.pageDailyGeneration')" />
						<el-table-column prop="address" :label="$t('message.oneStandNews.pageTotalGeneration')" />
					</el-table>
				</div>
			</div>

			<div style="height: 1rem"></div>

			<div style="flex: 1; display: grid; grid-template-columns: 3fr 7fr; grid-gap: 10px; height: 100%">
				<div class="chart-three-container">
					<p class="chart-title">{{ $t('message.oneStandNews.pageDayTitle') }}</p>

					<div style="flex: 1; min-height: 0; position: relative; padding: 0 1rem">
						<div style="position: absolute; top: 0; left: 1rem; right: 1rem; bottom: 0; overflow-y: auto" class="scroll-container">
							<div v-for="(item, i) in daySendHours" :key="i" style="display: flex; align-items: center; margin-bottom: 1rem; padding-left: 1rem">
								<p style="width: 1.5rem; height: 1.5rem; line-height: 1.5rem; background: #ffac4c; text-align: center; flex-shrink: 0">
									{{ item.id }}
								</p>
								<p style="font-size: 1rem; width: 5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0.5rem">
									{{ item.name }}
								</p>
								<div
									style="background: linear-gradient(to right, #377e95, #64d9f3); height: 0.8rem; border-radius: 0.4rem"
									:style="{ width: item.value * 3 + 'rem' }"
								></div>
								<span style="font-size: 0.8rem; color: #64d9f3; margin-left: 0.5rem"> {{ item.value }}h </span>
							</div>
						</div>
					</div>
				</div>

				<div class="chart-four-container">
					<div style="padding: 0.8rem; padding-top: 1.2rem">
						<el-button
							size="mini"
							v-for="(item, index) in buttonLabelOperate"
							:key="item.id"
							:type="activeTab === index ? 'primary' : ''"
							@click="changeIndex(index)"
							>{{ item.label }}</el-button
						>
					</div>

					<div v-if="activeTab === 0">
						<div ref="dayPower" class="dayPower"></div>
					</div>

					<div v-if="activeTab === 1">
						<div ref="dayPowerMeasure" class="dayPowerMeasure"></div>
					</div>

					<div v-if="activeTab === 2">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="month"
								format="YYYY-MM"
								class="custom-date-picker"
								value-format="YYYY-MM"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="dayPowerElectValue"
							/>
						</div>
						<div ref="powerElectMatch" class="powerElectMatch"></div>
					</div>

					<div v-if="activeTab === 3">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="month"
								format="YYYY-MM"
								class="custom-date-picker"
								value-format="YYYY-MM"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="monthElectValue"
							/>
						</div>
						<div ref="monthPowerMeasure" class="monthPowerMeasure"></div>
					</div>

					<div v-if="activeTab === 4">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="year"
								format="YYYY"
								class="custom-date-picker"
								style="width: 10rem"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="yearPowerValue"
							/>
						</div>
						<div ref="yearPowerMeasure" class="yearPowerMeasure"></div>
					</div>

					<div v-if="activeTab === 5">
						<div ref="everyYearPowerMeasure" class="everyYearPowerMeasure"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" name="chartIndex">
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import img1 from '../../assets/R6.png';
import img2 from '../../assets/R7.png';
import img3 from '../../assets/R8.png';
import img4 from '../../assets/R9.png';
import img5 from '../../assets/R10.png';
import img6 from '../../assets/R11.png';
import { useI18n } from 'vue-i18n'; 
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import pageHeader from '../../components/pageHeader/index.vue';
import { defineComponent, reactive, toRefs, ref, onMounted, watch, onActivated, CSSProperties, nextTick, computed } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default defineComponent({
	components: {
		pageHeader,
	},
	setup() {
		const { t } = useI18n();
		const storesTagsViewRoutes = useTagsViewRoutes();
		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

		interface PageOne {
			id: number;
			name: string;
			value: number;
			image: any;
			color: string;
		}
		interface DaySendHour {
			id: number;
			name: string;
			value: number;
		}

		const state = reactive({
			tableRef: null,
			yearPowerValue: '',
			monthElectValue: '',
			dayPowerElectValue: '',
			dayPower: null as HTMLElement | null,
			dayPowerMeasure: null as HTMLElement | null,
			powerElectMatch: null as HTMLElement | null,
			yearPowerMeasure: null as HTMLElement | null,
			monthPowerMeasure: null as HTMLElement | null,
			everyYearPowerMeasure: null as HTMLElement | null,
			realTimePower: null,
			substationData: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			tableData: [{ name: '苏州天佑' }, { name: '苏州天佑' }, { name: '苏州天佑' }],
			activeTab: 0,
			buttonLabelOperate: [
				{
					id: 'alarm',
					label: t('message.oneStandNews.pageDailyPower'),
				},
				{
					id: 'log',
					label: t('message.oneStandNews.pageDaily'),
				},
				{
					id: 'log',
					label: t('message.oneStandNews.pagePowerElectTitle'),
				},
				{
					id: 'log',
					label: t('message.oneStandNews.pageMonth'),
				},
				{
					id: 'log',
					label: t('message.oneStandNews.pageYear'),
				},
				{
					id: 'log',
					label: t('message.oneStandNews.pageEveryYear'),
				},
			],
			isHighResolution: false,
			dayPowerChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: [
						'04:00',
						'04:30',
						'05:00',
						'05:30',
						'06:00',
						'06:30',
						'07:00',
						'07:30',
						'08:00',
						'08:30',
						'09:00',
						'09:30',
						'10:00',
						'10:30',
						'11:00',
						'11:30',
						'12:00',
						'12:30',
						'13:00',
						'13:30',
						'14:00',
						'14:30',
						'15:00',
					],
					axisLabel: {
						interval: 0,
						// rotate: 45,
						formatter: '{value}',
						fontSize: 10,
						color: '#fff',
					},
					axisTick: {
						alignWithLabel: true,
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						fontSize: 10,
						color: '#fff',
					},
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [10, 11, 13, 15, 11, 8, 12, 14, 11, 12, 13, 15, 11, 18, 2, 14, 11, 12, 13, 15, 11, 8, 12, 14, 11, 10],
						type: 'line',
						smooth: true,
					},
				],
			},
			dayChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			monthChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			yearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			everyYearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
		});

		const pageOneNumber = ref<Array<PageOne>>([
			{
				id: 1,
				name: '',
				value: 0,
				color: '#fff',
				image: img1,
			},
			{
				id: 2,
				name: '总数:',
				value: 19,
				color: '#48a0f8',
				image: img2,
			},
			{
				id: 3,
				name: '有发电:',
				value: 51,
				color: '#62be8b',
				image: img3,
			},
			{
				id: 4,
				name: '有停机:',
				value: 69,
				color: '#eec25d',
				image: img4,
			},
			{
				id: 5,
				name: '有通讯异常:',
				value: 51,
				color: '#ef8b56',
				image: img5,
			},
			{
				id: 6,
				name: '',
				value: 1.51,
				color: '#fff',
				image: img6,
			},
		]);
		const daySendHours = ref<Array<DaySendHour>>([
			{
				id: 1,
				name: '苏州天佑',
				value: 1.77,
			},
			{
				id: 2,
				name: '太仓利洁时',
				value: 1.69,
			},
			{
				id: 3,
				name: '无锡液空',
				value: 2.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
		]);

		const getLabel = (id: number): string => {
			switch (id) {
				case 1:
					return t('message.oneStandNews.pageSubstationExceptions');
				case 2:
					return t('message.oneStandNews.pageStatistics');
				case 6:
					return t('message.oneStandNews.pageCapacity');
				default:
					return '';
			}
		};

		//实时功率
		const initRealTimePower = (): void => {
			if (!state.realTimePower) return;

			const containerStyle = getComputedStyle(state.realTimePower);
			if (containerStyle.width === '0px' || containerStyle.height === '0px') {
				return;
			}

			const option = {
				series: [
					{
						type: 'gauge',
						progress: {
							show: true,
							width: 12,
						},
						axisLine: {
							lineStyle: {
								width: 12,
							},
						},
						pointer: {
							show: true, // 显示指针
						},
						axisTick: {
							show: false, // 显示刻度
						},
						splitLine: {
							show: false, // 显示分割线
						},
						axisLabel: {
							show: false, // 显示数字
						},
						detail: {
							valueAnimation: false,
							fontSize: 12,
							color: '#fff',
							offsetCenter: ['10%', '40%'],
							formatter: '{value}%',
						},
						title: {
							offsetCenter: ['5%', '100%'],
						},
						data: [
							{
								value: 50, // 确保这是一个有效的数值
								name: '', // 这里确保 name 有效
							},
						],
					},
				],
			};

			const chart = echarts.init(state.realTimePower);
			chart.setOption(option);

			// 监听窗口大小变化
			window.addEventListener('resize', () => chart.resize());
		};

		const changeIndex = async (id: number) => {
			state.activeTab = id;

			await nextTick();

			switch (id) {
				case 0:
					initDayPower();
					break;
				case 1:
					initDayPowerMeasure();
					break;
				case 2:
					initPowerElectMatch();
					break;
				case 3:
					initMonthPowerMeasure();
					break;
				case 4:
					initYearPowerMeasure();
					break;
				case 5:
					initEveryYearPowerMeasure();
					break;
				default:
					break;
			}
		};

		// 功率电量对比
		const initPowerElectMatch = () => {
			if (!state.powerElectMatch) return;

			const powerElectMatchElement = state.powerElectMatch;

			powerElectMatchElement.style.height = state.isHighResolution ? '20rem' : '9rem';

			const tooltipConfig = {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999',
					},
				},
			};

			const xAxisConfig = {
				type: 'category',
				data: ['04', '05', '06', '07', '08', '09', '10'],
				axisTick: { show: false },
				axisLine: { lineStyle: { color: '#fff' } },
			};

			const yAxisConfigs = [
				{
					type: 'value',
					name: '万kWh',
					axisLabel: { formatter: '{value}' },
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				{
					type: 'value',
					name: 'MW',
					axisLabel: { formatter: '{value}' },
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
			];

			const seriesData = [
				{
					name: '当前功率',
					type: 'bar',
					barWidth: '35%', // 柱子宽度
					tooltip: {
						valueFormatter: (value: any) => `${value} MW`,
					},
					data: [0.9, 0.3, 0.5, 0.4, 0.1, 0.9, 0.2],
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' },
							],
							global: false,
						},
						borderRadius: [10, 10, 6, 6],
					},
				},
				{
					name: '小时发电量',
					type: 'line',
					yAxisIndex: 1,
					smooth: true,
					tooltip: {
						valueFormatter: (value: any) => `${value} 万kWh`,
					},
					data: [0.05, 0.01, 0, 0.09, 0.02, 0.06, 0.07],
					itemStyle: {
						color: '#E00074',
					},
					lineStyle: {
						width: 2,
						type: 'solid',
					},
				},
			];

			const option = {
				grid: {
					containLabel: true,
					top: 30,
					bottom: state.isHighResolution ? 40 : 10,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
				tooltip: tooltipConfig,
				xAxis: [xAxisConfig],
				yAxis: yAxisConfigs,
				series: seriesData,
			};

			const chart = echarts.init(state.powerElectMatch);
			chart.setOption(option);
			window.addEventListener('resize', () => chart.resize());
		};

		// 日功率
		const initDayPower = async () => {
			if (!state.dayPower) return;

			const myChart = echarts.init(state.dayPower);
			state.dayPower.style.height = state.isHighResolution ? '25rem' : '10rem';

			await nextTick();

			myChart.setOption({
				...state.dayPowerChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		// 日发电量
		const initDayPowerMeasure = async () => {
			if (!state.dayPowerMeasure) return;
			const myChart = echarts.init(state.dayPowerMeasure);

			state.dayPowerMeasure.style.height = state.isHighResolution ? '25rem' : '10rem';

			await nextTick();

			myChart.setOption({
				...state.dayChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		//  月发电量
		const initMonthPowerMeasure = async () => {
			if (!state.monthPowerMeasure) return;
			const myChart = echarts.init(state.monthPowerMeasure);

			state.monthPowerMeasure.style.height = state.isHighResolution ? '25rem' : '10rem';

			await nextTick();

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		//  年发电量
		const initYearPowerMeasure = async () => {
			if (!state.yearPowerMeasure) return;
			const myChart = echarts.init(state.yearPowerMeasure);

			state.yearPowerMeasure.style.height = state.isHighResolution ? '25rem' : '10rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		// 历年发电量
		const initEveryYearPowerMeasure = async () => {
			if (!state.everyYearPowerMeasure) return;
			const myChart = echarts.init(state.everyYearPowerMeasure);
			state.everyYearPowerMeasure.style.height = state.isHighResolution ? '25rem' : '10rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		onMounted(() => {
			state.isHighResolution = window.innerWidth >= 1600;
			initDayPower();
			initRealTimePower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();

			// 获取当前年份、月份
			const currentDate = new Date();
			const currentYear: number = currentDate.getFullYear();
			const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');
			state.yearPowerValue = `${currentYear}`;
			state.monthElectValue = `${currentYear}-${currentMonth}`;
			state.dayPowerElectValue = `${currentYear}-${currentMonth}`;
		});

		// 由于页面缓存原因(keep-alive)
		onActivated(() => {
			initDayPower();
			initRealTimePower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();
		});

		const route = useRoute();
		// 获取单个参数
		const titleName = route.query.name;
		const headerTitle = computed(() => {
			const name = (route.query.name as string) || '';
			return name + ' ' + t('message.oneStandNews.pageTitle');
		});

		// 表头样式
		const headerCellStyle = ({
			row,
			column,
			rowIndex,
			columnIndex,
		}: {
			row: any;
			column: any;
			rowIndex: number;
			columnIndex: number;
		}): CSSProperties => {
			return {
				backgroundColor: '#2C3E50',
				color: '#4498EB',
				fontSize: '0.8rem',
				fontWeight: 'bold',
				borderBottom: '1px solid #2d4a7a',
				textAlign: 'center' as CSSProperties['textAlign'],
			};
		};

		// 定义 tableRowClassName 参数的类型
		interface TableRowClassNameParams {
			row: any; // 表格行数据
			rowIndex: number; // 行索引
		}

		// 表格行样式
		const tableRowClassName = ({ row, rowIndex }: TableRowClassNameParams) => {
			if (rowIndex % 2 === 0) {
				return 'first-row';
			} else {
				return 'second-row';
			}
		};

		return {
			...toRefs(state),
			pageOneNumber,
			daySendHours,
			getLabel,
			titleName,
			changeIndex,
			headerTitle,
			headerCellStyle,
			initRealTimePower,
			tableRowClassName,
			initPowerElectMatch,
			initYearPowerMeasure,
			initMonthPowerMeasure,
		};
	},
});
</script>

<style lang="scss">
.layout-station {
	.table-container {
		.table-toolbar {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 10px;
		}

		.el-table__inner-wrapper:before {
			background-color: #2d4a7a !important;
		}

		.el-table .el-table__cell {
			padding: 3px 0;
		}

		.first-row {
			color: #fff;
			font-weight: bold;
			font-size: 0.8rem;
			background-color: rgba(137, 224, 255, 0.1);
		}

		.second-row {
			color: #fff;
			font-weight: bold;
			font-size: 0.8rem;

			background-color: rgba(137, 224, 255, 0.1);
		}

		.el-scrollbar__view {
			width: 100% !important;
			height: 100% !important;
			background-color: #041424;
		}

		.el-table__body {
			width: 100% !important;
			tr {
				td {
					border-bottom: 1px solid #2d4a7a; /* 行底部边框颜色 */
				}
			}
		}

		/* 设置行悬停颜色 */
		.el-table__body tr:hover > td {
			background-color: rgba(95, 207, 250, 0.1) !important;
		}

		/* 设置行点击后的颜色 */
		.el-table__body tr.current-row > td {
			background-color: rgba(95, 207, 250, 0.2) !important;
		}

		.pagination {
			left: 0;
			bottom: 0;
			display: flex;
			position: sticky;
			margin-top: 10px;
			margin-right: 10px;
			justify-content: right !important;
		}

		.columns-setting-icon {
			font-size: 18px;
			cursor: pointer;
			color: #676767;
		}

		.table-header .cell {
			color: #333;
		}
	}
}
</style>

<style lang="scss" scoped>
.chart-scrollbar {
	color: #fff;
	padding: 1rem;
	height: 100vh;
	background: url('../../assets/bgImage.png') center center / 100% 100% no-repeat;
}

/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
	display: none;
}

.scroll-container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.chart-title {
	color: #48a0f8;
	font-size: 1.3rem;
	font-weight: bolder;
	display: inline-flex;
	align-items: center;
	line-height: 2.5em;
	letter-spacing: 2px;
	text-indent: 0.5rem;

	&::before {
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 12px solid #48a0f8;
		border-top: 9px solid transparent;
		border-bottom: 9px solid transparent;
		margin-right: 10px;
		vertical-align: middle;
		position: relative;
		top: -1px;
		left: 8px;
	}
}

.chart-one-container {
	background: url('../../assets/R3.png') no-repeat center;
	background-size: 100% 100%;
	height: 100%;
}

.chart-two-container {
	background: url('../../assets/R12.png') no-repeat center;
	background-size: 100% 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	padding: 0.8rem;
}

.chart-three-container {
	background: url('../../assets/R5.png') no-repeat center;
	background-size: 100% 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.chart-four-container {
	background: url('../../assets/R12.png') no-repeat center;
	background-size: 100% 100%;
	height: 100%;
}

.bg-image {
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.dayPower {
	width: 100%;
	height: 150px;
}

.dayPowerMeasure {
	width: 100%;
	height: 150px;
}

.powerElectMatch {
	width: 100%;
	height: 150px;
}

.monthPowerMeasure {
	width: 100%;
	height: 150px;
}

.yearPowerMeasure {
	width: 100%;
	height: 150px;
}

.everyYearPowerMeasure {
	width: 100%;
	height: 150px;
}
</style>
